<template>
  <div>
    <van-row>
      <van-col span="6"><lef></lef></van-col>
      <van-col span="18">
        <van-row>
          <van-col span="24"><headers></headers></van-col>
        </van-row>
        <van-row>
          <van-col span="5">
            <van-field
                v-model="name"
                name="name"
                label="请输入用户名"
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '请输入用户名' }]"
            /> </van-col>
          <van-col span="5">
            <van-field
                v-model="name"
                name="name"
                label="请输入账号"
                placeholder="请输入账号"
                :rules="[{ required: true, message: '请输入账号' }]"
            /> </van-col>
          <van-col span="5">
            <van-field
                v-model="mobile"
                name="mobile"
                label="请输入手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请输入手机号' }]"
            /> </van-col>
          <van-col span="3"><van-button type="info">查询</van-button></van-col>
          <van-col span="5"><van-button disabled type="primary">重置</van-button>
          </van-col>

        </van-row>
        <van-row>
          <van-col span="2">
            <van-button type="info" @click="add_show">新增</van-button>
            <div v-show="is_show">
              <van-button plain type="primary" @click="ss">取消</van-button>
              <form action="" @submit.prevent="onSubmit1">
              <p>用户姓名: <input type="text" v-model="form1.name"></p>
              <p>用户密码: <input type="text" v-model="form1.password"></p>
              <p>工号: <input type="text"  v-model="form1.job_number"></p>
              <p>用户用户账号: <input type="text" v-model="form1.nikename"></p>
              <p>用户排序: <input type="text" v-model="form1.sort"></p>
              <p>用户密级: <input type="text"  v-model="form1.level"></p>
              <p>qq号: <input type="text"  v-model="form1.qq"></p>
              <p>手机号: <input type="text"  v-model="form1.mobile"></p>
              <p>性别: <input type="text"  v-model="form1.sex"></p>
              <p>生日 <input type="text"  v-model="form1.birthday"></p>
              <p>邮箱: <input type="text"  v-model="form1.email"></p>
              <p>座机: <input type="text"  v-model="form1.phone"></p>
              <p>是否实体用户: 实体用户<input type="radio"  v-model="form1.is_user" value="1">
                虚拟用户<input type="radio"  v-model="form1.is_user" value="2"></p>
                <p>头像: <van-uploader :after-read="afterRead">上传</van-uploader></p>
                <select v-model="form1.bum_id">
                  <option v-for="i in bumenlist" :key="i.id" :value="i.id">{{i.name}}</option>
                </select>
                <select v-model="form1.role_id">
                  <option v-for="i in rolelist" :key="i.id" :value="i.id">{{i.name}}</option>
                </select>
                <select v-model="form1.gangwei_id">
                  <option v-for="i in gangweilist" :key="i.id" :value="i.id">{{i.name}}</option>
                </select>
                <button type="submit">提交</button>
              </form>
            </div>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">删除</van-button>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">导出</van-button>
          </van-col>
          <van-col span="2">
            <van-uploader :after-read="afterRead" multiple accept=".xls">导入</van-uploader>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">冻结</van-button>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">解冻</van-button>
          </van-col>
          <van-col span="2">
            <van-button disabled type="primary">回收站</van-button>
          </van-col>

        </van-row>
        <van-row>

        </van-row>
      </van-col>
    </van-row>


  </div>
</template>

<script>
import Lef from "@/components/veiw/lef";
import headers from "@/components/veiw/headers";
import myaxios from "@/http/axios";
import axios from "axios";
export default {
  components: {headers, Lef},
  name: "yonghu",
  data() {
    return {
      data1: '',
      name:'',
      code:'',
      is_show:false,
      form1:{},
      mobile:'',
      bumenlist:[],
      rolelist:[],
      gangweilist:[],
      user_list:[]
    }
  },
  methods: {
    add_show(){
      this.is_show = true
    },
    onSubmit1() {
      myaxios('users','post',this.form1).then(res=>{
        alert(res.msg)
      })
      console.log(this.form1)
    },
    ss(){
      this.is_show = false
    },
    get_bumen(){
      myaxios('bumen','get').then(res=>{
        this.bumenlist = res.list
        this.get_role()
      })
    },
    get_role(){
      myaxios('role','get').then(res=>{
        this.rolelist = res.list
        this.get_gangwei()
      })
    },
    get_gangwei(){
      myaxios('gangwei','get').then(res=>{
        this.gangweilist = res.list

      })
    },
    afterRead(file){
      alert(1)
      let formdate = new FormData()
      formdate.append('file',file.file)
      axios({url:'uplod',method:'post',data:formdate}).then(res=>{
        this.form1.img = res.data.img
      })
    },
    get_userlist(){
      myaxios('users','get').then(res=>{
        this.user_list = res.list
      })
    }
  },
  mounted() {
      this.get_bumen()
      this.get_userlist()


  }
}
</script>

<style scoped>

</style>